<template>
  <div class="verification">
    <div class="login-form-cont">
        <ul id="login-form">
            <li class="login-user">
                <i class="icon iconfont icon-mima"></i>
                <input ref="yzm" class="login-user-ipt" v-model="yzm" type="text" placeholder="验证码" @keyup.enter="go">
                <img :src="validateCodeUri" @click="getYzm">
            </li>
            <li class="login-btn" @click="go">登   录</li>
        </ul>
    </div>
    
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["message"],
  name: "verification",
  mounted: function() {
    this.getYzm();
  },
  data() {
    return {
      validateCodeUri: "",
      token: "",
      yzm: ""
    };
  },
  methods: {
    getYzm() {
      axios
        .get(validateCodeInfoURL)
        .then(res => {
          let d = res.data;
          if (d.resultCode == 0) {
            this.validateCodeUri = URL + "/" + d.record.validateCodeUri;
            this.token = d.record.token;
          } else {
            layer.msg(d.msg);
            layer.closeAll()
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    go() {
      if (this.yzm == "") {
        layer.msg("请输入验证码");
        this.$refs.yzm.focus();
      } else {
        axios
          .post(loginURL, {
            loginName: this.message.User,
            password: this.message.Psd,
            verificationCode: this.yzm,
            token: this.token
          })
          .then(res => {
            let d = res.data;
            if (d.resultCode == 0) {
              appDB.set(
                "userInfo",
                $.extend(d.record, { psd: this.message.Psd })
              );
              localStorage.setItem("num", 0);
              //2小时存到本地
              let timestamp=7200000;
              let timestamp1=new Date().getTime();
              appDB.set("time",timestamp);
              appDB.set("timeOut",timestamp1);
              layer.closeAll();
              this.$router.push("/index");
            } else {
              layer.closeAll();
              layer.msg(d.msg);
            }
          })
          .catch(error => {
            layer.msg("网络错误");
          });
      }
    }
  }
};
</script>

<style scoped>
.verification {
  width: 100%;
  padding: 40px 10%;
  float: left;
}
img {
  cursor: pointer;
  margin-top: 6px;
  display: inline;
}
.login-form {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
.login-form-shadow {
  width: 100%;
  height: 120px;
  float: left;
  background: #fff;
  opacity: 0.3;
  border-radius: 6px;
  border: 1px solid #ffffff;
  box-shadow: 0 0 3px #011a32;
}
.login-form-cont {
  width: 100%;
  padding: 0 4%;
  float: left;
  position: relative;
}
#login-form {
  display: flex;
  justify-content: space-between;
}
.login-user {
  width: 72%;
  padding: 0 2%;
  background: #fff;
  border-radius: 5px;
  font-size: 16px;
  box-shadow: 0 0 5px #575555 inset;
}
.login-btn {
  width: 20%;
  line-height: 44px;
  background: #59c532;
  text-align: center;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}
.icon {
  font-size: 30px;
  float: left;
  margin-right: 5px;
  float: left;
}
.login-user-ipt {
  width: 63%;
  height: 38px;
  line-height: 38px;
  float: left;
  margin-top: 2px;
}
</style>
